<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
	{
	style: {
	navigationStyle: 'custom',
	navigationBarTitleText: '消息',
	},
	}
</route>
<template>
	<view class="bg overflow-hidden pt-2" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
		<view class="tabs mt-8 px-5">
			<text class="text-lg" style="position: relative">
				聊天
				<view class="count" style="position: absolute; top: -0.5rem; right: -0.3rem">3</view>
			</text>
			<text class="ml-4">订单</text>
			<text class="ml-4">闲置</text>
		</view>
		<view class="tab-bottom"></view>

		<view class="message-item" v-for="item in list" @click="goView">
			<view class="content flex flex-row items-center">
				<img style="height: 2.88rem; border-radius: 50%" :src="item.icon" />
				<view class="item-right flex flex-col justify-between">
					<view class="flex justify-between">
						<text class="nickname">{{ item.nickName }}</text>
						<text class="time">{{ item.time }}</text>
					</view>
					<view class="flex justify-between">
						<view class="message">{{ item.message }}</view>
						<view class="count" v-if="item.count > 0">
							{{ item.count }}
						</view>
					</view>
				</view>
			</view>
			<view class="line"></view>
		</view>

		<tabbar></tabbar>
	</view>
</template>

<script lang="ts" setup>
	import Tabbar from '@/components/tabbar/tabbar.vue'

	defineOptions({
		name: 'Home',
	})

	// 获取屏幕边界到安全区域距离
	const { safeAreaInsets } = uni.getSystemInfoSync()
	const author = ref('菲鸽')
	const description = ref(
		'unibest 是一个集成了多种工具和技术的 uniapp 开发模板，由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI + VSCode 构建，模板具有代码提示、自动格式化、统一配置、代码片段等功能，并内置了许多常用的基本组件和基本功能，让你编写 uniapp 拥有 best 体验。',
	)
	// 测试 uni API 自动引入
	onLoad(() => {
		console.log(author)
	})
	function goView() {
		uni.navigateTo({
			url: '/pages/message-input/index',
		})
	}
	const list = ref([
		{
			icon: new URL('@/static/app/custom-icon/avatar6.png', import.meta.url).href,
			nickName: '我是紫涵',
			message: '周末要不要去看电影？',
			time: '今天09:21',
			count: '1',
		},
		{
			icon: new URL('@/static/app/custom-icon/avatar2.png', import.meta.url).href,
			nickName: 'DLJ.',
			message: '你在干嘛呢？',
			time: '今天09:21',
			count: '1',
		},
		{
			icon: new URL('@/static/app/custom-icon/avatar3.png', import.meta.url).href,
			nickName: 'kilig',
			message: '你好，在吗？',
			time: '今天09:21',
			count: '1',
		},
		{
			icon: new URL('@/static/app/custom-icon/avatar4.png', import.meta.url).href,
			nickName: 'kilig',
			message: 'zpp在吗？',
			time: '2024-11-28',
			count: '0',
		},
	])
</script>

<style scoped>
	.main-title-color {
		color: #d14328;
	}

	.bg {
		padding-bottom: 3.56rem;

		.tabs {
			text {
				width: 2rem;
				height: 1.44rem;
				font-family: SourceHanSansSC-regular;
				color: rgba(0, 0, 0, 1);
				text-align: left;
			}
		}

		.tab-bottom {
			width: 1.63rem;
			height: 0.38rem;
			margin-bottom: 0.19rem;
			margin-left: 1.63rem;
			background: linear-gradient(89.94deg,
					rgba(117, 214, 244, 1) 47.99%,
					rgba(92, 152, 254, 1) 100.25%);
			border-radius: 0.25rem;
		}

		.message-item {
			width: 100%;
			/*0.06rem是分割线的高度*/
			height: 4.56rem;
			margin-bottom: 0.25rem;

			.content {
				height: 4.5rem;
				padding-left: 0.94rem;

				.item-right {
					box-sizing: border-box;
					width: 100%;
					height: 100%;
					padding: 0.69rem 0.88rem 0.69rem 0.5rem;

					.nickname {
						height: 1.25rem;
						font-family: PingFangSC-regular;
						font-size: 0.88rem;
						line-height: 1.25rem;
						color: rgba(16, 16, 16, 1);
					}

					.message {
						height: 1.25rem;
						font-family: PingFangSC-regular;
						font-size: 0.88rem;
						line-height: 1.25rem;
						color: rgba(16, 16, 16, 1);
					}

					.time {
						height: 1.06rem;
						font-family: SourceHanSansSC-regular;
						font-size: 0.75rem;
						line-height: 1.06rem;
						color: #a8a8a8;
					}
				}
			}

			.line {
				position: absolute;
				left: 4.5rem;
				width: 18rem;
				height: 0.06rem;
				background-color: rgba(187, 187, 187, 1);
			}
		}
	}

	.count {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.13rem;
		height: 1.13rem;
		font-size: 0.75rem;
		color: white;
		text-align: center;
		vertical-align: center;
		background-color: #ff3363;
		border-radius: 50%;
	}
</style>